<template>
  <!-- 计数器 -->
  <div
    class="pho-form-item pho-form-flex"
    :style="{...newStyle,flexDirection:$attrs.isTop ? 'column' : ''}"
  >
    <van-field
      class="form-input-hidden"
      v-bind="$attrs"
      :value="value"
      :label="showLabel ? $attrs.label : ''"
      :name="$attrs.__vModel__"
      input-align="right"
    >
    <template #label>
      <span v-if="showLabel" slot="label" :style="newStyle.font">{{$attrs.label}}</span>
    </template>
    </van-field>
    <TextShow v-if="$attrs.onlyShow" :value="value" />
    <div v-else class="right-box center" style="height: 24px">
      <van-slider v-model="formValue" v-bind="$attrs" @change="handleChange" />
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { comMixin } from "../../../utils/comMixins";
export default {
  mixins: [comMixin],
  name: "phone-form-slider",
  model: {
    prop: "value", // 绑定的值，通过父组件传递
    event: "update",
  },
  props: {
    value: {},
    // 是否展示标题
    showLabel: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      formValue: 0,
    };
  },
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler(newValue) {
        if (this.$attrs.range) {
          this.formValue = newValue ? newValue.split(",") : [];
          return;
        }
        this.formValue = parseInt(newValue || 0);
      },
    },
  },
  methods: {
    handleChange(value) {
      Toast("当前值：" + value);
      if (this.$attrs.range) {
        this.$emit("update", value.length ? value.join(",") : "");
        this.$emit("change", value.length ? value.join(",") : "");
        this.onChange(value.length ? value.join(",") : "");
        return;
      }
      this.$emit("update", value + "");
      this.$emit("change", value + "");
      this.onChange(value + "");
    },
  },
};
</script>

<style lang="scss" scoped></style>
